<template>
  <div id="app">
    <div class="wait" v-if="islogin=='wait'">
        <span class="fa fa-spinner fa-3x fa-pulse" style="margin-top:80%;color:white"></span>
    </div>
    <transition :name="aniname">
      <router-view/>
    </transition>
    
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'app',
  data:function(){
    return {
      aniname:null
    }
  },
  computed:{
      ...mapState([
          "islogin"
      ]),
  },
  mounted:function(){
    this.http.get("/api/users/islogin").then(res=>{
      if(!res.data.err){
        this.$store.commit("setIsLogin",res.data.data);
      }else{
        this.$store.commit("setnotlogin","");
      }
    })
  },
  watch:{
    $route:function(vh,ov){
      var beforPage = ov.path.split("/").length-1;
      var afterPage = vh.path.split("/").length-1;
      if(afterPage>beforPage){
        this.aniname = "leftchange"
      }else if(beforPage>afterPage){
        this.aniname = "rightchange"
      }else{
        this.aniname = ''
      }
    }
  }
}
</script>

<style scoped>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    .wait{
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 100;
    }
    .leftchange-enter{
        transform: translate(100%,0)
    }
    .leftchange-enter-active,.leftchange-leave-active{
        transition: all 0.7s;
        position: absolute;
        width: 100%;
    }
    .leftchange-enter-to,.leftchange-leave{
        transform: translate(0,0)
    }
    .leftchange-leave-to{
        transform: translate(-100%,0)
    }


    .rightchange-enter{
        transform: translate(-100%,0)
    }
    .rightchange-enter-active,.rightchange-leave-active{
        transition: all 0.7s;
        position: absolute;
        width: 100%;
    }
    .rightchange-enter-to,.rightchange-leave{
        transform: translate(0,0)
    }
    .rightchange-leave-to{
        transform: translate(100%,0)
    }
</style>
